<template>
  <BackageContainer>
    <v-btn icon @click="handleBack" :elevation="0" variant="text" class="back-btn">
      <j-icon :size="30">mdi-arrow-left</j-icon>
    </v-btn>
    <v-card class="mx-auto code-card" max-width="380" variant="flat">
      <v-card-title>
        <span class="text-title">请输入控制码</span>
      </v-card-title>
      <v-card-actions>
        <v-btn text color="orange" @click="copyToPingUrl">复制投屏链接</v-btn>
        <v-spacer></v-spacer>
        <v-btn @click="createRandomId" color="#f87171">随机生成投屏码</v-btn>
      </v-card-actions>

      <v-card-text class="text--primary">
        <v-otp-input v-model="id" :length="4" base- bg-></v-otp-input>
      </v-card-text>

      <v-card-actions>
        <v-btn variant="outlined" @click="toKongZhi">
          <j-icon size="18">手机</j-icon>
          进入控制端
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn @click="toTouYing" variant="outlined">
          <j-icon>投屏</j-icon>
          进入投屏端
        </v-btn>
      </v-card-actions>
    </v-card>
  </BackageContainer>
</template>
<script>
import { copyText, rodom, Flutter } from "@/utils/utils";
import BackageContainer from "@/layout/BackageContainer.vue";
export default {
  name: "TouYingNav",
  components: {
    BackageContainer,
  },
  data() {
    return {
      id: localStorage.getItem("touyingId") || rodom(),
      text: "复制成功",
    };
  },

  methods: {
    toKongZhi() {
      localStorage.setItem("touyingId", this.id);
      this.$router.push({
        path: `/touying/${this.id}`,
      });
    },
    toTouYing() {
      this.$router.push({
        path: `/fangying/${this.id}`,
      });
    },
    handleBack() {
      if (Flutter.back()) return;

      this.$router.back();
    },
    createRandomId() {
      this.id = rodom();
    },
    copyToPingUrl() {
      const value = `${window.location.protocol}//${window.location.host}/#/fangying/${this.id}`;
      copyText(value);
      this.$toast.success("复制成功");
    },
  },
};
</script>
<style scoped lang="scss">
.code-card {
  margin-top: 200px;
}
.code-card:has(.v-input--is-focused) {
  margin-top: 80px;
}
</style>
